<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Combo KML Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
        <script src="examples.js" type="text/javascript"></script>
        <script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22earth%22%2C%22version%22%3A%221%22%7D%5D%7D&key=ABQIAAAAbEBR9v0lqBFdTfOcbe5WjRQPjtdHQ3xdBuNAR-KDFOW1mqdVsRRmZhmrl-MOSGS44M9Gug9FdssEgQ" type="text/javascript" charset="utf-8"></script>
        <script id="sample" type="text/example" charset="utf-8">
            var tree;

            $(document).ready(function(){
                google.earth.createInstance('map3d', init, failure);                
            });

            function init(ge) {
                ge.getWindow().setVisibility(true);
                var gex = gex = new GEarthExtensions(ge);      

                var tree = kmltree({
                    url: './kml/selection.kml',
                    gex: gex, 
                    element: $('#tree'),
                    mapElement: $('#map3d'),
                    setExtent: true,
                    selectable: function(kmlObject){
                        return kmlObject.getType() === 'KmlPlacemark';
                    },
                    multipleSelect: true
                });

                tree.load();

                $(tree).bind('select', function(e, selectData){
                    if(console && console.log){
                        console.log('select event', selectData);
                    }
                });

                $(tree).bind('context', function(e, selectData){
                    if(console && console.log){
                        console.log('context event', selectData);
                    }
                });
                
            }

            function failure(errorCode) {
                alert('failed to load plugin');
            }
            
        </script>
    </head>
    <body>
        <div class="content">
            <p class="description">
                This example shows selection support via the 
                <code>selectable</code> option in combination with the 
                <code>multipleSelect</code> option. Try using the 
                command/control and shift keys to select multiple features 
                from the tree. Also, notice how selecting features from the
                map that are within contracted Folders or NetworkLinks show
                "breadcrumb" indicators on their first visible parent.
            </p>
            <p>
                If your browser supports the <code>console.log</code> 
                function, you can see the <code>code</code> and 
                <code>context</code> events firing.                
            </p>
        </div>
    </body>
</html>